<template>
  <el-form :model="formList" label-width="120px">
    <el-form-item v-for="(item, index) in formList" :key="index" :label="`表单项 ${index + 1}`">
      <el-row :gutter="20">
        <!-- Form ID 输入 -->
        <el-col :span="6">
          <el-input v-model="item.formId" placeholder="请输入 Form ID" clearable />
        </el-col>

        <!-- 时间选择 -->
        <el-col :span="10">
          <el-time-picker
            v-model="item.multipleTime"
            is-range
            format="HH:mm"
            value-format="HH:mm"
            range-separator="-"
            :teleported="false"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-col>

        <!-- 提交次数 -->
        <el-col :span="6">
          <el-input-number v-model="item.submitCount" :min="0" controls-position="right" />
        </el-col>

        <!-- 删除按钮 -->
        <el-col :span="2">
          <el-button v-if="formList.length > 1" type="danger" circle @click="removeFormItem(index)">
            <el-icon><Delete /></el-icon>
          </el-button>
        </el-col>
      </el-row>
    </el-form-item>

    <!-- 添加表单项按钮 -->
    <el-form-item>
      <el-button type="primary" @click="addFormItem">添加表单项</el-button>
      <el-button type="success" @click="submitForm">提交表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'

// 表单数据
const formList = ref([
  {
    formId: '',
    multipleTime: ['08:00', '18:00'], // 默认时间范围
    submitCount: 0,
  },
])

// 添加表单项
const addFormItem = () => {
  formList.value.push({
    formId: '',
    multipleTime: ['08:00', '18:00'],
    submitCount: 0,
  })
}

// 删除表单项
const removeFormItem = (index: number) => {
  formList.value.splice(index, 1)
}

// 提交表单
const submitForm = () => {
  console.log('表单数据：', formList.value)
  // 这里可以添加提交到后端的逻辑
}
</script>
